<template>
    <div class="data-input-container">

      <!-- 教室输入部分 -->
      <div class="input-group">
        <label for="classroom-input">教室号:</label>
        <input
          id="classroom-input"
          v-model="inputClassroom"
          type="number"
          placeholder="请输入教室号"
          class="room-input"
          @input="validateClassroom"
        />
        <span v-if="classroomError" class="error-message">{{ classroomError }}</span>
      </div>

      <!-- 入口选择部分 -->
      <div class="input-group">
        <label for="entry-select">选择入口:</label>
        <div class="dropdown">
          <button 
            class="dropdown-toggle" 
            @click="toggleEntryDropdown"
          >
            {{ selectedEntry || '请选择入口' }}
          </button>
          <ul 
            v-show="showEntryDropdown" 
            class="dropdown-menu"
          >
            <li 
              v-for="entry in entryOptions" 
              :key="entry"
              @click="selectEntry(entry)"
            >
              {{ entry }}
            </li>
          </ul>
        </div>
      </div>
  
      
  
      <!-- 操作按钮 -->
      <div class="button-group">
          <button 
            class="btn-submit" 
            @click="goToInDoor"
          >
            查看 {{ userStore.entry }} 室内路线
          </button>
        <button 
          class="btn-reset" 
          @click="resetForm"
        >
          重置定位
        </button>
      </div>
  
      <!-- 显示当前存储的值 -->
      <div v-if="userStore.entry || userStore.classroom" class="current-data">
        <h3>当前选择的:</h3>
        <p>{{ userStore.entry }}   教室: {{ userStore.classroom }}</p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useUserStore } from '../stores/Aim.js'
  import {entries,reset} from '../stores/entries.js'
  import { useRouter, useRoute } from 'vue-router'
  import { northRoom,allRoom,getEntry } from '../stores/inDoorData.js'
  const router = useRouter()

  const userStore = useUserStore()
  
  // 入口选择相关
  const showEntryDropdown = ref(false)
  const selectedEntry = ref('')
  let entryOptions = ['入口4']
  
  // 教室输入相关
  const inputClassroom = ref(311)
  const classroomError = ref('')
  
  // 表单验证状态
  const isFormValid = computed(() => {
    return selectedEntry.value && !classroomError.value && inputClassroom.value!==0
  })
  const isRightData = () =>{
    return selectedEntry.value && allRoom.has(inputClassroom.value)
  }
  // 切换下拉菜单显示
  const toggleEntryDropdown = () => {
    showEntryDropdown.value = !showEntryDropdown.value

  }
  
  // 选择入口
  const selectEntry = (entry) => {
    selectedEntry.value = entry
    showEntryDropdown.value = false
    submitData();

    userStore.mapInstance.plugin(['AMap.Walking'],function(){
            let walking = new userStore.mapInstance.Walking({
                map : userStore.map,
            })
            let i = Number(entry[2]-1)
            console.log("i ",i)
            console.log("dest ",entries[i])
            walking.search(userStore.position,entries[i].position,function (status,result){
                if (status === 'complete') {
                    console.log('绘制步行路线完成')
                } else {
                    console.error('步行路线数据查询失败' + result)
                    console.log(mapStore.classroom)
                } 
            })
        })
  }
  
  // 验证教室号
  const validateClassroom = () => {
    const value = inputClassroom.value
    submitData()
    selectedEntry.value = ''
    console.log("yes ",value)
    if (!value) {
      classroomError.value = '请输入教室号'
    } else if (isNaN(value) || value < 100 || value > 999) {
      classroomError.value = '请输入100-999之间的数字'
    } else if(!allRoom.has(value)){
      classroomError.value = '没有这个教室'
    } else {
      classroomError.value = ''
      entryOptions = getEntry(value)
    }
  }
  
  // 提交数据到Pinia
  const submitData = () => {
      console.log("entry ",selectEntry.value,"room ",inputClassroom.value)
      userStore.setAim(selectedEntry.value, Number(inputClassroom.value))
  }

  const goToInDoor = ()=>{
    submitData()
    console.log("valid ",isFormValid)
    if(isRightData()){
      router.push("/indoor")
    }else{
      alert("教室号输入不正确, 或没有选择入口")
    }
  }
  
  // 重置表单
  const resetForm = () => {
    let p = reset(userStore.map,userStore.mapInstance);
    if(p != -1) userStore.setPosition(p);
    selectedEntry.value = ''
  }


  </script>
  
  <style scoped>
  .data-input-container {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .input-group {
    margin-bottom: 20px;
  }
  
  label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }
  .room-input{
    font-weight: bold;
    color: blue;
    font-size: large;

  }
  .dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  
  .dropdown-toggle {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    text-align: left;
    cursor: pointer;
    font-weight: bold;
    color:blue;
  }
  
  .dropdown-toggle:hover {
    border-color: #aaa;
  }
  
  .dropdown-menu {
    position: absolute;
    width: 100%;
    margin-top: 4px;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .dropdown-menu li {
    padding: 8px 12px;
    cursor: pointer;
  }
  
  .dropdown-menu li:hover {
    background-color: #f5f5f5;
  }
  
  input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .error-message {
    color: #ff4444;
    font-size: 12px;
    margin-top: 4px;
    display: block;
  }
  
  .button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }
  
  button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex: 1;
  }
  
  .btn-submit {
    background-color: #4CAF50;
    color: white;
  }
  
  .btn-submit:hover {
    background-color: #45a049;
  }
  
  .btn-submit:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
  }
  
  .btn-reset {
    background-color: #f44336;
    color: white;
  }
  
  .btn-reset:hover {
    background-color: #d32f2f;
  }
  
  .current-data {
    margin-top: 0px;
    padding-top: 20px;
    border-top: 1px dashed #ddd;
  }
  
  .current-data h3 {
    margin-bottom: 10px;
  }
  </style>
  